<template>
  <div class="bs-card" :style="{width:width,height:height}">
    <div class="bs-card-corner" v-for="index of 4" :key="index"></div>
    <div class="bs-card-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'bs-card',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang='scss'>
@import '../styles/_variables.scss';

.bs-card {
  position: relative;
  display: inline-block;
  .bs-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 10px 20px;
    background-color: $cardbg;
  }

  .bs-card-corner {
    position: absolute;
    // z-index: 0;
    height: 12px;
    width: 12px;
    border: 1px solid $cardbg;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    border-top-left-radius: 5px;

    &:nth-child(1) {
      top: -4px;
      left: -4px;
    }
    &:nth-child(2) {
      top: -4px;
      right: -4px;
      transform: rotate(90deg);
    }
    &:nth-child(3) {
      bottom: -4px;
      right: -4px;
      transform: rotate(180deg);
    }
    &:nth-child(4) {
      bottom: -4px;
      left: -4px;
      transform: rotate(270deg);
    }
  }

  .el-loading-mask{
    background-color: rgba(255,255,255, 0.2);

    .el-loading-spinner .path{
      stroke: #fff;
    }
  }
}
</style>
